/**
 * 2018/06/01 by xiongisxiong
 * 小部件：评论回复组件
 */
import React, { PureComponent } from 'react';
import { View, Image, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons'

import { screen, color } from '../utils';
import { Normal, Tip } from './TextTool';

import Avatar from './Avatar'; // 头像组件

export default class CommentItem extends PureComponent {
  render() {
    const { data } = this.props;
    console.log('传过来的data：', data)
    return (
        <View style={styles.container}>
            <View style={{paddingHorizontal: 10, paddingVertical: 10}}>
                <Avatar img={{uri: data.user.avatarUrl + '?param=80y80'}} size={30} />
            </View>
            <View style={styles.textContainer}>
                {/* 第一行：名字与点赞人数 */}
                <View style={{flexDirection: 'row', alignItems: 'center'}}>
                    <Normal color={color.gray}>{data.user.nickname}</Normal>
                    <View style={{flex: 1}} />
                    <Tip style={{marginRight: 5}} color={color.gray}>{data.likedCount}</Tip>
                    <Icon name='ios-thumbs-up-outline' size={20} color={color.gray}/>
                </View>
                {/* 第二行：几分钟或几小时前 */}
                <Tip color={color.gray}>{}</Tip>
                {/* 第三行：空盒子占地 */}
                <View style={{height: 10}}></View>
                {/* 第四行：评论内容 */}
                {
                    data.beReplied.length === 0 && <Normal>{data.content}</Normal>
                }
                {
                    data.beReplied.length > 0 && (
                        <View>
                            <Normal>回复
                                <Normal color={color.blue}>@{data.beReplied[0].user.nickname}</Normal>:{data.content}
                            </Normal>
                            <View style={{marginTop: 10, padding: 10, borderWidth: 1, borderColor: color.border, backgroundColor: color.white}}>
                                <Normal><Normal color={color.blue}>@{data.beReplied[0].user.nickname}</Normal>:{data.beReplied[0].content}</Normal>
                            </View>
                        </View>
                    )
                }
            </View>
        </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
      flex: 1,
      flexDirection: 'row',
      backgroundColor: color.backgroundColor
  },
  textContainer: {
      flex: 1,
      paddingVertical: 10,
      paddingRight: 10,
      borderBottomWidth: 1,
      borderColor: color.border
  }
});
